<template>
    <div class="e-form">
        <div class="tabs">
            <div class="tabs-title" id="baseInfo">基本信息</div>
            <div style="width: 100%;" class="form">
                  <el-form :model="formData" ref="ruleForm" label-width="240px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="合同编号" prop="billNo">
                                            {{ formData.billNo }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="单据机构" prop="orgName">
                                            {{ formData.orgName }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="合同类型" prop="contractTypeValue">
                                            {{ formData.contractTypeName }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="合同名称" prop="contractBillId">
                                            {{ formData.contractName }}&nbsp;
                                            <span class="a" @click="onViewContract" v-if="formData.contractBillId">查看</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="结算单位" prop="settlementUnitId">
                                            {{ formData.settlementUnitName }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="结算日期" prop="settlementDate">
                                            {{ formData.settlementDate }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="预付款金额(元)" prop="amount">
                                            {{ formData.amount }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="币种" prop="currencyId">
                                            {{ formData.currency }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="累计预付款金额(元)" prop="cumulativeAmount">
                                            {{ formData.cumulativeAmount }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="冲预付款金额(元)" prop="writeOffAmount">
                                            {{ formData.writeOffAmount }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="本位币" prop="baseCurId">
                                            {{ formData.baseCurName }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="传输财务共享" prop="easId">
                                            {{ !formData.easId ? '未上传' : '已上传' }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="预付款金额(本位币)" prop="baseCurAmount">
                                            {{ formData.baseCurAmount }}&nbsp;
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="状态" prop="state">
                                            草稿
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="备注" prop="remarks">
                                            <el-input
                                                type="textarea"
                                                :autosize="{ minRows: 2, maxRows: 4}"
                                                placeholder="请输入内容"
                                                v-model="formData.remarks"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
            </div>
        </div>
        <div class="buttons">
            <el-button
                type="primary"
                style="background: #2e61d7"
                @click="onSave"
            >保存</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import { openAppClient } from '@/utils/common'
// eslint-disable-next-line no-unused-vars
import request from '@/api/materialSettlement/supplierPayment'
import { mapState } from 'vuex'

let oldRouter = {} // 上一个页面来源
export default {
    data () {
        return {
            billType: '1018',
            //表单数据
            formData: {},
            maxAmount: 0,
            orgId: '', //机构id
            orgName: '', //机构名称
            val: '', //冲预付款金额（元）：
        }
    },
    computed: {
        ...mapState(['userInfo']),
        ...mapState('contract', ['ctClassify']),
        ...mapState('equip', ['equipData']),
        billId () {
            return this.$route.query.billid
        },
    },
    beforeRouteEnter (to, from, next) {
        oldRouter = from
        next()
    },
    beforeRouteLeave (to, from, next) {
        oldRouter = null
        next()
    },
    created () {
        this.formData.orgId = this.userInfo.orgInfo.orgId
        this.formData.orgName = this.userInfo.orgInfo.orgName
    },
    mounted () {
        this.initRedData()
    },
    methods: {
        //获取红单初始化信息
        async initRedData () {
            const res = await request.initRed({ billId: this.billId })
            this.formData = res
        },
        //保存按钮
        onSave () {
            request.paymentAdd(this.formData)
                .then(res => {
                    this.clientPop('info', '保存成功，是否继续？', () => {
                        this.$router.replace(`/supplierPaymentRed?billid=${res}`)
                    }, null, () => {
                        this.$router.replace('/supplierPayment')
                    })
                })
        },
        //取消按钮
        onCancel () {
            if (oldRouter.path === '/supplierPayment') {
                this.$router.back()
            } else {
                this.$router.replace('/supplierPayment')
            }
        },
        onViewContract () {
            //1物资采购、2周材租赁、3加工、4设备采购、5设备租赁、6服务采购
            let url = ''
            let title = ''
            switch (this.formData.contractTypeValue) {
            case 1:
                url = 'ctMaterialApplyShow'
                title = '物资采购合同'
                break
            case 2:
                url = 'ctRevolvMaterialApplyShow'
                title = '周材租赁合同'
                break
            case 3:
                url = 'processingContractApplyShow'
                title = '加工合同'
                break
            case 4:
                url = 'ctEquipmentPurchaseApplyShow'
                title = '设备采购合同'
                break
            case 5:
                url = 'ctEquipmentLeaseApplyShow'
                title = '设备租赁合同'
                break
            case 6:
                url = 'serviceProcurementApplyShow'
                title = '服务采购合同'
                break
            }
            openAppClient(`/${url}?billid=${this.formData.contractBillId}&isview=true`, `查看${title}`)
        },
        getState (state) {
            const findObj = this.equipData.state.find(item => item.value === Number(state))
            return findObj ? findObj.label : ''
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}

.e-table {
    background: #fff;
}

.el-tab-pane {
    margin-left: -10px;
}
</style>
